<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="20">
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
          <a-form-item label="券类型">
            <a-select v-model="queryParam.voucherType" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="2">折扣券</a-select-option>
              <a-select-option value="1">满减券</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
          <a-form-item label="AWARDID">
            <a-input allowClear v-model="queryParam.awardId" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
          <a-form-item label="券号">
            <a-input allowClear v-model="queryParam.voucherNo" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
          <a-form-item label="券名称">
            <a-input allowClear v-model="queryParam.voucherName" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
          <a-form-item label="操作原因">
            <a-input allowClear v-model="queryParam.remark" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
          <a-form-item label="操作人">
            <a-input allowClear v-model="queryParam.workNo" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
          <a-form-item label="操作时间" has-feedback>
            <a-range-picker
              style="width:100%;"
              show-time
              valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              v-model="queryParam.time"
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="24" :xl="24" :lg="24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <a-button type="primary" style="margin-left: 8px" @click="handleDelay">券延长</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
export default {
  props: {
  },
  data() {
    return {
      queryParam: {
        voucherType: ''
      }
    }
  },
  computed: {},
  created() {
  },
  mounted() {},
  methods: {
    // 券延期
    handleDelay() {
      this.$router.push(`/marketingCenter/otherTools/boCouponExtension/extension`)
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    reset() {
      this.queryParam = {
        voucherType: ''
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },
    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] && values[i].length) {
          if (i === 'time') {
            formValue.optStartDate = values[i][0]
            formValue.optEndDate = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
</style>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
